{% extends "base.html" %}
{% load i18n l10n static wger_extras django_bootstrap_breadcrumbs crispy_forms_tags %}

{% block title %}{{ingredient.name}}{% endblock %}

{% block header %}
<script>
$(document).ready(function() {
    wgerInitIngredientDetail("{% url 'api-ingredient-get-values' ingredient.id %}");
});
</script>
{% endblock %}



{% block breadcrumbs %}
    {{ block.super }}

    {% breadcrumb "Ingredients" "nutrition:ingredient:list" %}
    {% breadcrumb ingredient ingredient.get_absolute_url %}
{% endblock %}

{% block content %}



<div itemscope itemtype="https://schema.org/NutritionInformation">
<meta itemprop="name" content="{{ingredient.name}}" />

<form class="wger-form"
      method="GET"
      action="{% url 'api-ingredient-get-values' ingredient.id %}"
      id="nutritional-values-form"
      style="background-color: transparent; border-width: 0px; box-shadow: 0px 0px 0px 0px transparent;">
    <div id="calculator-errors"></div>
    <input type="hidden" value="{{ingredient.id|unlocalize}}" name="ingredient">

    {% crispy form %}
</form>

<table class="table table-hover">
    <thead>
        <tr>
            <th colspan="2">
                {% translate "Macronutrients" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% translate "Energy" %}</td>
            <td itemprop="calories" class="text-right">
                <span id="value-energy">{{ingredient.energy|floatformat:1}}</span> {% translate "kcal" %} /
                <span id="value-energy-kjoule">{{ingredient.energy_kilojoule|floatformat:1}}</span> {% translate "kJ" %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Protein" %}</td>
            <td itemprop="proteinContent" class="text-right">
                <span id="value-protein">{{ingredient.protein|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Carbohydrates" %}</td>
            <td itemprop="carbohydrateContent" class="text-right">
                <span id="value-carbohydrates">{{ingredient.carbohydrates|floatformat}}</span> {% translate "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td class="pl-5">{% translate "Sugar content in carbohydrates" %}</td>
            <td itemprop="sugarContent" class="text-right">
                {% if ingredient.carbohydrates_sugar %}
                    <span id="value-carbohydrates-sugar">{{ingredient.carbohydrates_sugar|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Fat" %}</td>
            <td itemprop="fatContent" class="text-right">
                <span id="value-fat">{{ingredient.fat|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td class="pl-5">{% translate "Saturated fat content in fats" %}</td>
            <td itemprop="saturatedFatContent" class="text-right">
                {% if ingredient.fat_saturated %}
                    <span id="value-fat-saturated">{{ingredient.fat_saturated|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

<table class="table table-hover">
    <thead>
        <tr>
            <th colspan="2">
                {% translate "Others" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% translate "Fiber" %}</td>
            <td itemprop="fiberContent" class="text-right">
                {% if ingredient.fiber %}
                    <span id="value-fiber">{{ingredient.fiber|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Sodium" %}</td>
            <td itemprop="sodiumContent" class="text-right">
                {% if ingredient.sodium %}
                    <span id="value-sodium">{{ingredient.sodium|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>
</div>

<small>
    {{ ingredient.attribution_link|safe }}
</small>
{% endblock %}



{% block sidebar %}

{% if perms.nutrition.delete_ingredient %}
<h4>{% translate "Weight units" %}</h4>

{% translate 'Add new weight unit' as text %}
{% url 'nutrition:unit_ingredient:add' ingredient.id as url %}
{% modal_link url=url text=text  %}

{% if ingredient.ingredientweightunit_set.exists %}
    <table class="table">
    <thead>
        <tr>
            <th>{% translate "Name" %}</th>
        </tr>
    </thead>
    <tbody>
    {% for unit in ingredient.ingredientweightunit_set.select_related %}
        <tr>
            <td>
                {{unit.amount}} {{unit.unit.name}} = {{unit.gram}}g
                <div class="dropdown float-end">
                    <button type="button" class="btn btn-light dropdown-toggle btn-sm" data-bs-toggle="dropdown">
                        <span class="{% fa_class 'cog' %}"></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                        {% translate 'Edit' as text %}
                        {% url 'nutrition:unit_ingredient:edit' unit.id as url %}
                        {% modal_link url=url text=text css_class='dropdown-item' %}

                        {% translate 'Delete' as text %}
                        {% url 'nutrition:unit_ingredient:delete' unit.id as url %}
                        {% modal_link url=url text=text css_class='dropdown-item' %}
                    </div>
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endif %}
{% endif %}

{% if image %}
    <a href="{{ ingredient.off_link }}">
        <img src="{{ image.image.url }}" class="img-fluid">
    </a>
    <p>
    <small>
        {{ image.attribution_link|safe }}
    </small>
    </p>
{% endif %}

{% endblock %}




{#         #}
{# Options #}
{#         #}
{% block options %}
{% if perms.nutrition.delete_ingredient %}
<div class="btn-group">
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="{% fa_class 'cog' %}"></span>
            {% translate "Options" %}
        </button>
        <div class="dropdown-menu">
            {% translate 'Edit' as text %}
            {% url 'nutrition:ingredient:edit' ingredient.id as url %}
            {% modal_link url=url text=text css_class='dropdown-item' %}

            <div role="separator" class="dropdown-divider"></div>

            {% translate 'Delete' as text %}
            {% url 'nutrition:ingredient:delete' ingredient.id as url %}
            {% modal_link url=url text=text css_class='dropdown-item' %}
            </a>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}
